<!--
  Generated template for the AccountListPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

    <ion-toolbar content-page class="fir-toolbar">
        <ion-buttons start>
            <button ion-button icon-only (click)="goBack()">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>
            投连账户明细
        </ion-title>
    </ion-toolbar>

</ion-header>

<ion-content>
    <ion-list>
        <ion-list-header>
            <span class="first">投资账户单位数详情</span>
            <img *ngIf="accountList.accountList" [groupShowOrHide]="group1"
                 src="./assets/images/policy/arrow-up.png" alt="">
        </ion-list-header>
        <!--<div #group1>-->
            <!--<ion-card *ngFor="let account of accountList.accountList">-->
                <!--<ion-card-header>-->
                    <!--<span>-->
                        <!--{{account.fundName?account.fundName:'-'}}-->
                    <!--</span>-->
                <!--</ion-card-header>-->
                <!--<ion-item class="list-info">-->
                    <!--<span class="first-info">投资账户结余单位数</span>-->
                    <!--<span>-->
                        <!--{{account.unitBalance?account.unitBalance:'-'}}-->
                    <!--</span>-->
                <!--</ion-item>-->
                <!--<ion-item class="list-info">-->
                    <!--<span class="first-info">前一日交易价格</span>-->
                    <!--<span>-->
                        <!--{{account.unitPrice?account.unitPrice:'-'}}-->
                    <!--</span>-->
                <!--</ion-item>-->
            <!--</ion-card>-->
            <!--&lt;!&ndash;<div *ngIf="(!accountList.accountList || accountList.accountList.length === 0) && isLoaded" class="no-data">&ndash;&gt;-->
                <!--&lt;!&ndash;<div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>&ndash;&gt;-->
                <!--&lt;!&ndash;<div class="no-data-txt">没有相关数据</div>&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--</div>-->

        <div #group1>
            <ion-card *ngFor="let account of accountList.accountList">
                <ion-card-header>
                    <span class="first-info">{{account.fundName?account.fundName:'-'}}</span>
                </ion-card-header>
                <ion-item class="list-info">
                    <span class="first-info">投资账户结余单位数</span>
                    <span>
                        {{account.unitBalance?account.unitBalance:'-'}}
                    </span>
                </ion-item>
                <ion-item class="list-info">
                    <span class="first-info">前一日交易价格</span>
                    <span>
                        {{account.unitPrice?account.unitPrice:'-'}}
                    </span>
                </ion-item>
            </ion-card>
            <!--<div *ngIf="(!accountList.accountList || accountList.accountList.length === 0) && isLoaded" class="no-data">-->
            <!--<div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>-->
            <!--<div class="no-data-txt">没有相关数据</div>-->
            <!--</div>-->
        </div>
    </ion-list>
    <ion-list>
        <ion-list-header>
            <span class="first">投资交易详情信息</span>
            <img *ngIf="accountList.trxnSummary" [groupShowOrHide]="group2"
                 src="./assets/images/policy/arrow-up.png" alt="">
        </ion-list-header>
        <div #group2>
            <ion-card *ngFor="let trxn of accountList.trxnSummary" (click)="goToTrxnDetailPage(trxn.trxnDetail)">
                <ion-card-header>
                    <span class="first-info">交易日期：</span>
                    <span>
                         {{trxn.trxnDate*1000|myDate:'YYYY/MM/DD'}}
                    </span>
                </ion-card-header>
                <ion-item class="list-info">
                    <span class="first-info">交易类型</span>
                    <span>
                        {{trxn.trxnType?trxn.trxnType:'-'}}
                    </span>
                </ion-item>
                <ion-item class="list-info">
                    <span class="first-info">总金额</span>
                    <span>
                        {{trxn.trxnAmount?trxn.trxnAmount:'-'}}
                    </span>
                </ion-item>
                <ion-item class="list-info">
                    <span class="first-info">费用扣除</span>
                    <span>
                        {{trxn.chargeAmount?trxn.chargeAmount:'-'}}
                    </span>
                </ion-item>
                <ion-item class="list-info">
                    <span class="first-info">交易价格</span>
                    <span>
                        {{trxn.fundTrxnAmount?trxn.fundTrxnAmount:'-'}}
                    </span>
                </ion-item>
            </ion-card>
            <!--<div *ngIf="(!accountList.trxnSummary || accountList.trxnSummary.length === 0) && isLoaded" class="no-data">-->
                <!--<div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>-->
                <!--<div class="no-data-txt">没有相关数据</div>-->
            <!--</div>-->
        </div>

    </ion-list>

</ion-content>
